<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/moneyManage/EditRole_alert.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
</script>
<style>
    .layui-input-block {
        margin-left: 0px;
    }

    .layui-form-label {
        text-align: left;
    }
    .layui-input-inline,.layui-inline{
        display: inline;
    }
    .layui-form-label{
        padding-right: 5px;
    }
    .right_llp,.left_llp{
        display: inline-block;
        min-width: 145px;
    }
    .right_llp{
        margin-left: 36px;
    }
    .FageTag{
        color: red;
        font-size: 16px;
        position: absolute;
        left: -11px;
        top: 3px;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <!-- 角色名称和角色描述 -->
            <div class="layui-form">
                <div class="OnePulse layui-inline">
                    <label class="OneLabel layui-form-label"><i class="FageTag">*</i>角色名称:</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="tcRoleName" lay-verify="" autocomplete="off" class="layui-input"
                            id="RoleName_llp">
                    </div>
                </div>
                <div class="TwoBlack layui-black">
                    <label class="OneLabel layui-form-label"><i class="FageTag">*</i>角色描述:</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="tcRoleDsc" lay-verify="" autocomplete="off" class="layui-input"
                            id="RoleDoc_llp">
                    </div>
                </div>

                <div class="TwoBlack layui-black" style="text-align: center;">
                    <label class="OneLabel layui-form-label"></label>
                    <div class="layui-input-inline" id="com_edit2">
                        <input type="radio" name="tcRoleType" value="0" title="分部" checked>
                        <input type="radio" name="tcRoleType" value="1" title="总部">
                    </div>
                </div>


                <div class="cheBoxDiv">
                    <ul class="ChooseUL alert-con layui-containner layui-form" id="tag">

                    </ul>
                </div>

                <!-- 确定和取消按钮 -->
                <div class="buttonGrounpBtn">
                    <button class="layui-btn btn1 layui-btn-radius layui-btn-primary" lay-filter="layuiadmin-app-form-submit"
                        lay-submit>确定</button>
                    <button class="layui-btn btn2 layui-btn-radius layui-btn-primary">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js -->
<script type="text/javascript">
    layui.use(['admin', 'form', 'user', 'api', 'table', 'utill', 'view'], function () {
        var table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            api = layui.api,
            utill = layui.utill,
            form = layui.form,
            element = layui.element,
            laypage = layui.laypage,
            form = layui.form,
            admin = layui.admin,
            view = layui.view,
            $ = layui.jquery;
        // 发送请求
        var pageNum = 0;
        var pageSize = 0;
        $("#chooseAll").click(function () {
            $("#tag input").attr('checked', 'true');
            form.render();
        });
        admin.req({
            type: 'get',
            url: api.host + api.RolePremitList,
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (response) {
                var res = response.data;
                var str = '';
                res.forEach((item) => {
                    str += `<li class="dropDownBtn2" style="margin-top: 39px;font-size: 15px;font-weight: bold;">${item.title}<i class="layui-icon layui-icon-down" style="float:right"></i></li><ul class="dropDownBox">`
                    item.value.forEach((list) => {
                        str += `  
                        <li id='${list.tcPrmtId}'>
                          <div class="left_llp">
                             <input type="checkbox" class="first" name="" title="${list.tcPrmtDsc}" lay-skin="primary" lay-filter="tag" value="${list.tcPrmtId}">
                          </div>
                          <div class="right_llp">
                            <input type="radio" name="${list.tcPrmtId}" value="0" title="普通员工" data-lang="OrdinaryStaff" checked>
                            <input type="radio" name="${list.tcPrmtId}" value="2" title="领导" data-lang="Leader">
                            <input type="radio" name="${list.tcPrmtId}" value="3" title="管理员" data-lang="Administrators">
                          </div>  
                        </li>`
                    })
                    str += '</ul>'
                })
                $("#tag").append(str);
                $('body').on('click', '.dropDownBtn2', function (e) {
                    if ($(this).hasClass('on')) {
                        $(this).removeClass('on')
                        $(this).next().slideDown();
                        $(this).find('i').css('transform', 'rotate(0deg)');
                    } else {
                        $(this).addClass('on')
                        $(this).next().slideUp();
                        $(this).find('i').css('transform', 'rotate(180deg)');
                    }
                });
                form.render();
            }
        });

        form.on('submit(layuiadmin-app-form-submit)', function (data) {
            var rolenName = $("#RoleName_llp").val();
            var RoleDoc = $("#RoleDoc_llp").val();
            var choose = $('#com_edit2 input[name="tcRoleType"]:checked ').val();
            if (rolenName != "" && RoleDoc != "") {
                var field = data.field;
                var arr_box = [];
                $('input[type=checkbox]:checked').each(function () {
                    var prmtid = $(this).val()
                    var type = $('#' + prmtid + ' input[type=radio]:checked ').val()
                    var prmt = {
                        "tcRlrpPrmtId": prmtid,
                        "tcRlrpType": type,
                    }
                    arr_box.push(prmt);
                });
                var obj = {
                    "permit": arr_box,
                    "tcRoleType": choose,
                    "role": {
                        "tcRoleName": field.tcRoleName,
                        "tcRoleDsc": field.tcRoleDsc,
                        "tcRoleType": choose
                    }
                }
                admin.req({
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    url: api.host + api.insertRoleforPermit,
                    data: JSON.stringify(obj),
                    success: function (data) {
                        layui.table.reload('#shiftManagementSup'); //重载表格  
                        layer.close(layer.index);
                        layer.msg(data.message);
                    }
                });
                return false;
            } else {
                layer.msg('添加角色角色名称和角色描述不能为空,请填写');
            }
        });
    });
</script>